<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>财务</el-breadcrumb-item>
        <el-breadcrumb-item>结算与扣款明细</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入用户姓名"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
          >搜索</el-button
        >
      </el-input>
      <!-- 数据列表 -->
      <el-table :data="tableData" border>
        <el-table-column prop="pay_number" label="订单编号"></el-table-column>
        <el-table-column prop="users_name" label="用户姓名"></el-table-column>
        <el-table-column prop="users_phone" label="联系电话"></el-table-column>
        <el-table-column prop="money" label="支付金额"></el-table-column>
        <el-table-column  label="支付状态">
          <template slot-scope="scope">
            <el-tag type='danger' v-if='scope.row.pay_status==0'>未支付</el-tag>
            <el-tag v-if='scope.row.pay_status==1'>支付中</el-tag>
            <el-tag type='success' v-if='scope.row.pay_status==2'>已支付</el-tag>
            <el-tag v-if='scope.row.pay_status==3'>退款中</el-tag>
            <el-tag v-if='scope.row.pay_status==3'>已退款</el-tag>
          </template>
        </el-table-column>
        <el-table-column  label="付款方式">
          <template slot-scope="scope" v-if='scope.row.pay_status!=0 && scope.row.pay_status!=1'>
            <span v-if='scope.row.pay_type==1'>微信</span>
            <span v-if='scope.row.pay_type==2'>支付宝</span>
          </template>
        </el-table-column>
        <el-table-column  label="支付设备" >
          <template slot-scope="scope" v-if='scope.row.pay_status!=0 && scope.row.pay_status!=1'>
            <span v-if='scope.row.pay_device==1'>手机</span>
            <span v-if='scope.row.pay_device==2'>PC</span>
          </template>
        </el-table-column>
        <el-table-column prop="pay_time" label="支付时间" ></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { get } from "../../../../public/API/query";
import config from "../../../../public/config";

export default {
  data() {
    return {
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      currentPage4: 1,
      searchData: "",
      treeData: [],
      addGroupForm: {
        title: "",
      },
      addUserDialogVisible: false,
      Flag: false,
      clickData: {},
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
    };
  },
  computed: {},

  methods: {
    // 获取列表数据
    getTableData() {
      get('finance/settlement/index',{
        p:this.p,
        limit:this.limit
      },res=>{
        this.tableData = res.data._list;
        this.count = res.data.count;
      })
    },
    // 条数改变
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData()
    },
    // 页数改变
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
</style>
